<template>
  <v-dialog v-model="dialog" fullscreen>
    <div class="fixed top-0 left-0 w-full h-full overflow-y-auto z-[9999] md:py-4 cavnas-wrap" ref="canvasWrapRef">
      <button class="fixed right-4 top-4" @click="dialog = false">
        <j-icon :size="18" color="var(--v-title)">MdiClose</j-icon>
      </button>

      <img v-if="!loading" :src="img?.base64" class="w-full h-auto md:!w-auto md:!h-full md:mx-auto" />
      <div v-else class="mt-32 p-4">
        <div class="text-orange-500 bg-primary text-center p-4 rounded-md">海报绘制中,请稍等...</div>
      </div>

      <v-btn class="!fixed bottom-4 left-1/2 -translate-x-1/2" @click="exportJpeg">保存图片</v-btn>
    </div>
  </v-dialog>

  <v-btn @click="handleClick" :elevation="elevation" rounded :type="type" :color="color" :loading="loading">
    <slot>
      <j-icon :size="20">mdi-download</j-icon>
    </slot>
  </v-btn>
</template>
<script>
// :download="title"
// :href="downUrl"
import { baseURL } from "@/utils/request";
import joinImage from "@/utils/joinImage.ts";
import { isAndroid } from "@/utils/utils";
import { getImg } from "@/api/img";
export default {
  name: "DownLongGePu",
  props: {
    icon: {
      type: Boolean,
      default: false,
    },
    tag: {
      type: String,
      default: "v-btn",
    },
    type: {
      type: String,
      default: "primary",
    },
    color: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: `${new Date().getTime().toString()}.jpg`,
    },
    id: {
      type: [Number, String],
      required: true,
    },
    ids: {
      type: Array,
      required: true,
    },
    className: {
      type: [Array, String],
      default: "",
    },
    textColor: {
      type: String,
      default: "#fff",
    },
    elevation: {
      type: Number,
      default: 0,
    },
    erCodeUrl: {
      type: String,
      default: "",
    },
  },
  computed: {
    downUrl() {
      return `${baseURL}/api/img?id=${this.id}`;
    },
    isSplit() {
      if (this.img) {
        return this.img.isSplit;
      }
      return false;
    },
    base64Url() {
      if (this.img && !this.img.isSplit) {
        return this.img.base64;
      }
      return "";
    },
    base64Urls() {
      if (this.img && this.img.isSplit) {
        return this.img.base64;
      }
      return [];
    },
  },
  data() {
    return {
      base64Url: "",
      loading: false,
      dialog: false,
      img: null,
    };
  },
  methods: {
    async handleClick() {
      this.loading = true;
      this.dialog = true;
      const img = await joinImage(this.ids, {
        view: this.$refs.canvasRef,
        title: this.title.replace(".jpg", ""),
        erCodeString: this.erCodeUrl,
        id: this.id,
      });

      this.img = img;

      this.loading = false;
    },
    exportJpeg() {
      const url = this.img.base64;
      console.log("url:", url);
      const a = document.createElement("a");
      a.download = this.title;
      a.href = url;
      a.click();
      a.remove();
    },
  },
};
</script>

<style scoped>
.cavnas-wrap canvas {
  @apply w-full h-auto md:w-auto md:h-full md:mx-auto;
}
</style>
